<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <META HTTP-EQUIV="Pragma" CONTENT="no-cache">
    <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache">
    <META HTTP-EQUIV="Expires" CONTENT="0">
    <title>scroll page </title>
    <style type="text/css">
        html,body{
            width: 100%;
            padding: 0;
            margin: 0;
        }
        .warp {
            width: 100%;
            text-align: center;
            margin: auto;
        }

        .part1 {
            height: 1000px;
            overflow: hidden;
            background: #FF6666;
            position: relative;
        }

        .part2 {
            height: 1000px;
            overflow: hidden;
            background: #FFFF66;
            position: relative;
        }

        .part3 {
            height: 1000px;
            overflow: hidden;
            background: #99CC66;
            position: relative;
        }

        .demo {
            position: relative;
            height: 300px;
            width: 80%;
            margin: auto;
        }

        .demo > div {
            background: black;
            width: 250px;
            height: 50px;
            margin: 20px;
            position: absolute;
        }

        .one {
            top: 10px;
            left: 10px;
        }

        .two {
            top: 150px;
            left: 10px;
        }

        .three {
            top: 10px;
            right: 10px;
        }

        .four {
            top: 150px;
            right: 10px;
        }

    </style>
</head>
<body>

<div class="warp">
    <!-- 自动滑动演示 可用于一些动画的初始化进出平移效果 -->
    <div class="part1">
        <div class="demo">
            <div class="one" data-scrollAnimate="right" auto-animate="true"></div>
            <div class="two" data-scrollAnimate="right" auto-animate="true"></div>
            <div class="three" data-scrollAnimate="left" auto-animate="true"></div>
            <div class="four" data-scrollAnimate="left" auto-animate="true"></div>
        </div>

        <div class="demo">
            <div class="one" data-scrollAnimate="top" auto-animate="true"></div>
            <div class="two" data-scrollAnimate="bottom" auto-animate="true"></div>
            <div class="three" data-scrollAnimate="top" auto-animate="true"></div>
            <div class="four" data-scrollAnimate="bottom" auto-animate="true"></div>
        </div>
        <div class="demo">
            <div class="one" data-scrollAnimate="top" auto-animate="true"></div>
            <div class="two" data-scrollAnimate="right" auto-animate="true"></div>
            <div class="three" data-scrollAnimate="bottom" auto-animate="true"></div>
            <div class="four" data-scrollAnimate="left" auto-animate="true"></div>
        </div>

    </div>
    <!-- 滚动视觉 -->
    <div class="part2">
        <div class="demo">
            <div class="one" data-scrollAnimate="right"></div>
            <div class="two" data-scrollAnimate="right"></div>
            <div class="three" data-scrollAnimate="left"></div>
            <div class="four" data-scrollAnimate="left"></div>
        </div>

        <div class="demo">
            <div class="one" data-scrollAnimate="top"></div>
            <div class="two" data-scrollAnimate="bottom"></div>
            <div class="three" data-scrollAnimate="top"></div>
            <div class="four" data-scrollAnimate="bottom"></div>
        </div>
        <div class="demo">
            <div class="one" data-scrollAnimate="top"></div>
            <div class="two" data-scrollAnimate="right"></div>
            <div class="three" data-scrollAnimate="bottom"></div>
            <div class="four" data-scrollAnimate="left"></div>
        </div>
    </div>


    <!-- 演示手动绑定 -->
    <div class="part3">
        <div class="demo">
            <div class="one"></div>
            <div class="two"></div>
            <div class="three"></div>
            <div class="four"></div>
        </div>
        <div class="demo">
            <div class="one"></div>
            <div class="two"></div>
            <div class="three"></div>
            <div class="four"></div>
        </div>
        <div class="demo">
            <div class="one"></div>
            <div class="two"></div>
            <div class="three"></div>
            <div class="four"></div>
        </div>

    </div>
</div>


<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>

<script src="../src/jquery.pagescroll.js"></script>


<script>
    jQuery(function ($) {
           var offArr = ['top','bottom','left','right'];//模拟 位置
            $('.part3>.demo>div').each(function(){
                var index = ~~(Math.random()*10)%4;
                $(this).scrollAnimate({
                    offset: offArr[index],
                    offsetLen: 50,//偏移距离
                    callBackHander: function(){
                        console.info(offArr[index]+"---->动画执行完毕");
                    },
                    display:'show',
                    easing:'swing',
                    duration: 500,//动画执行时间
                    enableScrollTop: true,//启用滚动监听 不启用 立即执行动画
                    delay: 50//延时
                })
            });
    });
</script>
</body>
</html>